{include file="common/header"}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>遇见冬奥</title>
    <link href="/meetTWO/public/static/bootstrap/css/bootstrap.min.css" type="text/css" rel="Stylesheet" />
    <script src="/meetTWO/public/static/jquery/jquery-3.3.1.js" type="text/javascript"></script>
</head>
<style type="text/css">
    body {
        background-color: rgba(233, 232, 232, 0.945)!important;
    }
    
    button {
        color: rgb(255, 255, 255);
    }
    
    .interest,
    #btns {
        position: relative!important;
        margin: 20px!important;
    }
    
    #btns {
        font-family: Microsoft YaHei;
    }
    
    #cho {
        border-style: solid;
        border-color: grey;
        border-width: 1px;
        width: 100%!important;
        height: 200px!important;
        background: rgb(255, 255, 255)!important;
    }
    
    .btn {
        margin: 1px 2px !important;
    }
</style>
</head>

<!-- 
<body>
    <div id="checked">

    </div>

    <div id="unchecked">

    </div>

</body> -->

<body>
    <div id="interest">
        <h1 style="font-family:YouYuan;font-size:20px;color:rgb(85, 83, 83);font-weight:700;">有兴趣的标签：</h1>
        <div id="cho"></div>
    </div>
    </div>
    <div id="btns">
        <!-- <button type="button" class="btn btn-default" style="color:rgb(114, 202, 176)">跳台滑雪</button>
        <button type="button" class="btn btn-default" style="color:rgb(132, 144, 250)">俯式冰橇</button>
        <button type="button" class="btn btn-default" style="color:rgb(183, 185, 57)">自由式滑雪</button>
        <button type="button" class="btn btn-default" style="color:rgb(207, 132, 61)">无舵雪橇</button>
        <button type="button" class="btn btn-default" style="color:rgb(0, 30, 255)">冰壶</button>
        <button type="button" class="btn btn-default" style="color:rgb(39, 194, 39)">花样滑冰</button>
        <button type="button" class="btn btn-default" style="color:rgb(0, 174, 187)">短道速滑</button>
        <button type="button" class="btn btn-default" style="color:rgb(207, 132, 61)">越野滑雪</button>
        <button type="button" class="btn btn-default" style="color:rgb(114, 202, 176)">跳台滑雪</button>
        <button type="button" class="btn btn-default" style="color:rgb(207, 132, 61)">高山滑雪</button>
        <button type="button" class="btn btn-default" style="color:rgb(207, 52, 52)">现代冬季两项</button>
        <button type="button" class="btn btn-default" style="color:rgb(238, 77, 176)">有舵雪橇</button>
        <button type="button" class="btn btn-default" style="color:rgb(132, 144, 250)">冰球</button>
        <button type="button" class="btn btn-default" style="color:rgb(103, 40, 109)">速度滑冰</button>
        <button type="button" class="btn btn-default" style="color:rgb(207, 52, 52)">单板滑雪</button> -->
    </div>

</body>

<script>
    function randColor() {
        let r = Math.floor(Math.random() * 255);
        let g = Math.floor(Math.random() * 255);
        let b = Math.floor(Math.random() * 255);
        let color = 'rgba(' + r + ',' + g + ',' + b + ',0.8)';
        return color;
    }


    $(function() {
        $.getJSON('/meetTWO/public/index/interest/getInterest', {
            userID: '{$id}'
        }, function(data, status) {
            var interest = JSON.parse(data)
            var checked = interest.data.checked
            var uncheck = interest.data.uncheck
            uncheck.forEach(e => {
                let but = $('<button class="btn btn-default uninterest-but" value="' + e.english_name + '">' + e.name + '</button>')
                but.css("color", randColor);
                $('#btns')[0].append(but[0])
            });
            checked.forEach(e => {
                    let but = $('<button class="btn btn-default interest-but" value="' + e.english_name + '">' + e.name + '</button>')
                    but.css("color", randColor);
                    $('#cho')[0].append(but[0])
                })
                // $('.interest-but').click(function () {
                //     //this.value
                //     let name=this.value
                //     let englishName=$(this).innerHTML
                //     $(this).removeClass('interest-but')
                //     $(this).addClass("uninterest-but");

            //     $('#btns')[0].append(this)
            //     console.log(name)
            // })
            $('.btn').click(function() {
                //this.value
                let flag;
                let eName = this.value
                if ($(this).hasClass('interest-but')) {
                    $(this).removeClass('interest-but')
                    $(this).addClass("uninterest-but");
                    $('#btns')[0].append(this)
                    flag = 0


                } else {
                    $(this).removeClass('uninterest-but')
                    $(this).addClass("interest-but");
                    $('#cho')[0].append(this)
                    flag = 1

                }
                $.get('/meetTWO/public/index/interest/switchInterest', {
                    englishName: eName,
                    'flag': flag
                }, function(d) {
                    console.log(d)
                })



            })

        })
    });
</script>

</html>